<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>工厂</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <style>
            body{
                background: #f3f3f3;
            }
            .divTitle li.active{
                color: #327afa;
                border-bottom: 2px #327afa solid;
            }
            .divHeader{
                width:40%;
                margin:0 auto;
            }
            .gongchang .aui-list-view .aui-img-object{
                max-width: 40px;
                height: 40px;
            }
            .gongchang .aui-list-view-cell{
                padding:0;
            }
            .aui-img-body{
                padding:12px;
            }
            .bigPic{
                width: 100%;
            }
            .bigPic img{
                width: 100%;
                display: inherit;
            }
            .smallPic{
                background: #77746b;
                overflow: hidden;
                padding: 5px 0;

            }
            .smallPic li{
                width: 32%;
                float: left;
                position: relative;
                margin-left: 1%;
            }
            .smallPic li img{
                width: 100%;
                display: inherit;
            }
            .smallPic li .price{
                position: absolute;
                background: rgba(0,0,0,.6);
                padding:2px;
                display: block;
                bottom: 0;
                left: 0;
                color:#fff;
                font-weight: bold;
            }
            .kongshuju {
                display: none;
                padding-top: 150px;
            }
            .kongshuju p {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
                text-align: center;
            }
            .title{
                width: 100%;
                overflow: hidden;
            }
            .ulTitle{
            	padding:0 10px;
            }
            .ulTitle li{
            	padding:10px 0;
                margin-right:30px;
                float: left;
            }
            #List-content li{
                margin-bottom:20px;
            }
        </style>
    </head>
    <body>
        <div class="contain gongchang">
            <div class="title" id="headerTitle">
                <div class="divTitle">
                <!-- 头部分类 -->
                    <ul class="ulTitle" id="Category-content">     
                    </ul>
                </div>
            </div>
            <ul class="aui-list-view" id="List-content"></ul>
               <div class="kongshuju">
                    <p>暂无数据</p>
                </div>
        </div>
        <script id="Category-template" type="text/x-dot-template">
            {{ for(var i in it) { }}
            <li {{ if(i == 0){ }}class="active"{{ } }} data-id="{{=it[i].catid}}" tapmode onclick="switchChange(this)">{{=it[i].catname}}</li>
            {{ } }}
        </script>
        <script id="List-template" type="text/x-dot-template">  
            {{ for(var i in it){ }}
               <li class="aui-list-view-cell aui-img" tapmode onclick="">
                   <div class="aui-img-body">
                       {{=it[i].company}}
                       <p>{{=it[i].content}}</p>
                   </div>
                   <div class="bigPic"><img src="{{=it[i].thumb}}"></div>
                   {{? it[i].mall.length > 0}}
                   <ul class="smallPic">
                        <li>
                            <img src="{{=it[i].mall[0].thumb}}">
                            <span class="price">￥{{=it[i].mall[0].price}}</span>
                        </li>
                        <li>
                            <img src="{{=it[i].mall[1].thumb}}">
                            <span class="price">￥{{=it[i].mall[1].price}}</span>
                        </li>
                        <li>
                            <img src="{{=it[i].mall[2].thumb}}">
                            <span class="price">￥{{=it[i].mall[2].price}}</span>
                        </li>
                   </ul>
                   {{?}}
               </li>
            {{ } }}
        </script>
    </body>
    <script type="text/javascript" src="../script/api.js" ></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/echo.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/myInfo.js"></script>
    <script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../script/iscroll.js"></script>
    <script type="text/javascript">
    var page = 1,catid;
        apiready = function() {
            api.parseTapmode();
            getBrand();
            // getData();
            api.setRefreshHeaderInfo({
                visible : true,
                loadingImg : 'widget://image/ptr_pull.png',
                bgColor : '#efeff4',
                textColor : '#959595',
                textDown : '下拉刷新',
                textUp : '松开刷新',
                showTime : true
            }, function(ret, err) {
                page = 1;
                getData(catid);
                api.refreshHeaderLoadDone();
            });
            //监听是否达到底部上拉加载
            api.addEventListener({
                name : 'scrolltobottom'
            }, function(ret, err) {
                page++;
                if (isLock == false) {
                    getData(catid);
                }
            });
            //重新登录监听
            api.addEventListener({
                name : 'reGetMyInfo'
            }, function(ret) {
                if (ret && ret.value) {
                    page = 1;
                    getData();
                }
            });
            //监听分类
	        api.addEventListener({
	        	name:"getType"
	        },function(ret,err){
	        	if(ret.value.key.length>0){
	        		setWidth();
	        		loadYanse ();
	        	}
	        })
        }
        // $(function(){
        //     $(".divTitle").width(getWidth());
        //     loadYanse ();
        // })
        var myScroll;
        // 头部分类滚动
        function loadYanse () {
            myScroll = new IScroll('#headerTitle', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true ,
            vScroll: false,
            click:true,
            beforeScrollStart: function (e) {
                   if ( this.absDistX > (this.absDistY + 5 ) ) {
                       // user is scrolling the x axis, so prevent the browsers' native scrolling
                       e.preventDefault();
                   }
                }
           });
        }
        // 获取分类要滚动的宽度
        function setWidth(){
            var width=0;
            $(".ulTitle").find("li").each(function(){
                width+=$(this).outerWidth(true);
            }) 
            $(".divTitle").width(width+30);
        }

        //获取头部5个热门分类
        function getBrand() {
            var data = {};
            var url = 'factory/index';
            ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    catid = ret.msg[0].catid;
                    var content = $api.byId('Category-content');
                    var tpl = $api.byId('Category-template').text;
                    var tempFn = doT.template(tpl);
                    $api.html(content, '');
                    $api.prepend(content, tempFn(ret.msg));
                    getData(catid);
                    // 监听是否加载数据
                    api.sendEvent({
                    	name:'getType',
                    	extra:{
                    		key:'ok'
                    	}
                    })
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            })
            // $(".divTitle").width(getWidth());
            // loadYanse();
        }

        //获取数据
        function getData(catid){
            var data = {};
            // data['catid'] = catid;
            // data['page'] = page;
            url = 'factory/getlist/catid/'+ catid +'/page/' + page;
            ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    var content = $api.byId('List-content');
                    var tpl = $api.byId('List-template').text;
                    var tempFn = doT.template(tpl);
                    if (page > 1) {
                            $api.append(content, tempFn(ret.msg));
                            isLock = false;
                        } else {
                            $api.html(content, tempFn(ret.msg));
                            isLock = false;
                        }
                    hideLoading();
                } else {
                    hideLoading();
                    api.toast({
                        msg : ret.msg,
                        duration : 2000,
                        location : 'bottom'
                    });
                }
                var len = $('#List-content li').length;
                if (len > 0) {
                    $('.kongshuju').hide();
                } else {
                    $('.kongshuju').show();
                }
            });
        }

        // 处理热门和动态的切换,同时获取数据
        //type:想要获取数据的类别，obj当前单击的对象
        //type最好直接是分类的id，直接可以获取数据
        function switchChange(obj){
            // 改变选择状态
            changeCheck(obj);
            var dataID=$(obj).attr("data-id");
            if(dataID){
                $('#List-content').empty();
                getData(dataID);
            }
        }
        //为了在下面的热门类别可以通用，单独出来
        function changeCheck(obj){
            $(obj).parent().find("li").removeClass("active");
            $(obj).addClass("active");
        }
        //热门更多时候的选择  
        $(".moreList ul li").click(function(){
            changeCheck(this);
        })
        // 显示更多类别
        $(".getMoreType").click(function(){
            $(".moreType").css({"display":"block"})
        })
        // 隐藏更多类别
        $(".moreType .aui-arrow-right").click(function(){
            $(".moreType").css({"display":"none"})
        })
    </script>
</html>